<template>
    <el-tag v-for="instructor in instructorList" :key="instructor.id" closable
            @close="removeInstructor(instructor.id)">
        {{ instructor.name }}
    </el-tag>
    <el-popover :visible="show" placement="right" width="30%">
        <el-form ref="inviteRef" :model="inviteObj" :rules="rules"
                 label-width="120px" status-icon
        >
            <el-form-item label="姓名" prop="name">
                <el-input v-model.trim="inviteObj.name" clearable/>
            </el-form-item>
            <el-form-item label="邀请方式" prop="inviteWayKey">
                <el-radio-group v-model="inviteObj.inviteWayKey">
                    <el-radio label="no">导师编号</el-radio>
                    <el-radio label="telephone">手机号</el-radio>
                    <el-radio label="email">邮箱</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item :label="inviteWayName[inviteObj.inviteWayKey]" prop="inviteWayValue" ref="inviteValueRef">
                <el-input v-model.trim="inviteObj.inviteWayValue" clearable/>
            </el-form-item>
        </el-form>
        <div style="text-align: right; margin: 0">
            <el-button type="primary" :plain="true" @click="submitForm(inviteRef)">邀请</el-button>
            <el-button @click="resetForm">清空</el-button>
            <el-button type="danger" @click="show = false">关闭</el-button>
        </div>
        <template #reference>
            <el-button size="small" @click="show = !show">邀请第二指导教师</el-button>
        </template>
    </el-popover>
</template>

<script setup>
import {reactive, ref} from "vue";
import {getInstructorByEmailApi, getInstructorByNoApi, getInstructorByTelephoneApi} from "@/apis/instructor";
//邀请成员标签对话框
const props = defineProps(["instructorList"])
const emits = defineEmits(["update:instructorList"])

const inviteRef = ref()
const inviteValueRef = ref()
let show = ref(false)
//成员表单属性
let inviteObj = reactive({
    name: "",
    inviteWayKey: "no",
    inviteWayValue: ""
})

const inviteWayName = {"no": "导师编号", "telephone": "手机号", "email": "邮箱"}
//成员表单校验规则
const rules = {
    inviteWayKey: [{
        validator: (rule, value, callback) => {
            inviteValueRef.value.validate()
            return callback()
        },
        trigger: 'change'
    }],
    inviteWayValue: [
        {
            required: true,
            validator: (rule, value, callback) => {
                if (value === "") {
                    if (inviteObj.inviteWayKey === "no") return callback("教师编号不能为空")
                    else if (inviteObj.inviteWayKey === "telephone") return callback("手机号不能为空")
                    else return callback("邮箱不能为空")
                } else {
                    if (inviteObj.inviteWayKey === "telephone" && !/^1[3456789]\d{9}$/.test(value)) return callback("手机号不合法!")
                    else if (inviteObj.inviteWayKey === "email" && !/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/.test(value)) return callback("邮箱格式错误!")
                    else return callback()
                }
            },
            trigger: 'blur'
        },
    ],
    name: [
        {required: true, message: "姓名不能为空", trigger: 'blur'},
    ]
}
/**
 * 重置表单
 */
const resetForm = () => {
    inviteObj.name = ""
    inviteObj.inviteWayValue = ""
    inviteRef.value.clearValidate()
}
const submitForm = formEl => {
    if (!formEl) return
    formEl.validate(async valid => {
        if (valid) {
            let res
            if (inviteObj.inviteWayKey === "no") res = await getInstructorByNoApi(inviteObj.inviteWayValue)
            else if (inviteObj.inviteWayKey === "telephone") res = await getInstructorByTelephoneApi(inviteObj.inviteWayValue)
            else res = await getInstructorByEmailApi(inviteObj.inviteWayValue)
            if (res.data.name !== inviteObj.name) {
                ElMessage.error('查无此人')
            } else {
                emits("update:instructorList",[...props.instructorList,{name: res.data.name, id: res.data.id}])
                resetForm()
                show.value = false
            }
        }
    })
}
const removeInstructor = id => {
    emits("update:instructorList", props.instructorList.filter(value => value.id !== id))
}
</script>
<style scoped>
.el-form-item {
    margin-bottom: 20px;
}

.el-tag {
    margin-right: 10px;
}
</style>

